<template>
  <div class="gatt-wrap">
    <split-pane :value.sync="offset" :triggerWidth="triggerWidth">
      <!-- 左边 -->
      <gatt-left
        class="gatt-left"
        slot="left"
        ref="gattLeft"
        :headData="headData"
        :data="gattData"
        :uuId="uuId"
        @handleClick="handleClick"
        @change="change"
      ></gatt-left>
      <!-- 右边 -->
      <gatt-right
        class="gatt-right"
        slot="right"
        ref="gattRight"
        :startTime="startTime"
        :endTime="endTime"
        :headData="headData"
        :data="gattData"
        :uuId="uuId"
        @setRowColor="setRowColor"
        >
      </gatt-right>
    </split-pane>
    <div class="tool-tip">
      <el-dropdown @command="handleCommand" class="tool-tip-drop">
        <span class="el-dropdown-link">
          {{timeMode | timeModeFilters}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">天</el-dropdown-item>
          <el-dropdown-item command="2">周</el-dropdown-item>
          <el-dropdown-item command="3">月</el-dropdown-item>
          <el-dropdown-item command="4">季</el-dropdown-item>
          <el-dropdown-item command="5">半年</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
/* eslint-disable camelcase */
import SplitPane from '@components/SplitPane'
import GattLeft from './GattLeft'
import GattRight from './GattRight'
import * as math from 'mathjs'
export default {
  name: 'GattView',
  components: {
    SplitPane,
    GattLeft,
    GattRight
  },
  props: {
    uuId: {
      type: String,
      default: () => new Date().getTime() + Math.ceil(Math.random() * 10)
    }
  },
  data () {
    return {
    // 显示的刻度(时间刻度 1:日,2周,3月,4季,5年,默认是1)
      timeMode: 1,
      // split-pane 分割偏移百分比值
      offset: 0.2,
      // split-pane 分割偏移线宽
      triggerWidth: 2,
      // 甘特图头部日历数据
      headData: {},
      // 甘特图数据
      gattData: [],
      // 甘特图数据 最小的开始时间
      startTime: new Date(new Date().getTime() - 60 * 60 * 1000 * 24 * 7 * 4).getTime(),
      // 甘特图数据 最大的结束时间
      endTime: new Date(new Date().getTime() + 60 * 60 * 1000 * 24 * 7 * 4).getTime()
    }
  },
  filters: {
    // 处理函数
    timeModeFilters (value) {
      let lable = '天'
      switch (value) {
        case 1:
          lable = '天'
          break
        case 2:
          lable = '周'
          break
        case 3:
          lable = '月'
          break
        case 4:
          lable = '季'
          break
        case 5:
          lable = '半年'
          break
      }
      return lable
    }
  },
  methods: {
    init (params) {
      this.startTime = params.startTime ? String(params.startTime).includes('-') || String(params.startTime).includes('/') ? new Date(params.startTime).getTime() : params.startTime : this.startTime
      this.endTime = params.endTime ? String(params.endTime).includes('-') || String(params.endTime).includes('/') ? new Date(params.endTime).getTime() : params.endTime : this.endTime
      this.timeMode = params.timeMode ? params.timeMode : this.timeMode
      this.offset = params.offset ? params.offset : this.offset
      this.triggerWidth = params.triggerWidth ? params.triggerWidth : this.triggerWidth
      this.headData = params.headData ? params.headData : this.headData
      this.gattData = params.gattData ? params.gattData : this.gattData
      const timeMode = this.timeMode
      // 开始时间
      const startTime = new Date(this.startTime)
      const endTime = new Date(this.endTime).getTime()
      const rowW = params.rowWidth || 40
      const obj = this.getStartTimeMode(timeMode, startTime, rowW)
      // 格式化数据
      // 日周月季度半年切换模式下，firstDay开始时间和最小开始时间startTime之差
      const diff = startTime.getTime() - new Date(obj.firstDay)
      this.formatGanteData(this.gattData, obj.time, diff, startTime.getTime())
      this.$refs.gattRight.init({ timeMode, ...obj, rowW, endTime })
    },
    handleClick (d) {
      // console.log(d)
      // debugger
    },
    change (d) {
      // console.log(d)
      // debugger
    },
    handleCommand (command) {
      this.$emit('handleCommand', ~~command)
    },
    getStartTimeMode (timeMode, startTime, rowW) {
      rowW = rowW || 40
      var time = 0
      var firstDay = 0
      var mode = 1
      switch (timeMode) {
        case 1:
          time = 60 * 60 * 1 * 24 * 1000 / rowW
          firstDay = startTime
          break
        case 2:
          time = 7 * 24 * 60 * 60 * 1000 / rowW
          firstDay = new Date(startTime.getFullYear(), startTime.getMonth(), startTime.getDate() - ((startTime.getDay() + 7) % 7))
          break
        case 3:
          time = 30 * 24 * 60 * 60 * 1000 / rowW
          firstDay = new Date(startTime.getFullYear(), startTime.getMonth(), 1)
          mode = 2
          break
        case 4:
          time = 90 * 24 * 60 * 60 * 1000 / rowW
          var month = 0
          if (startTime.getMonth() + 1 >= 1 && startTime <= 3) {
            month = 0
          } else if (startTime.getMonth() + 1 >= 4 && startTime <= 6) {
            month = 3
          } else if (startTime.getMonth() + 1 >= 7 && startTime <= 9) {
            month = 6
          } else if (startTime.getMonth() + 1 >= 10 && startTime <= 12) {
            month = 9
          }
          firstDay = new Date(startTime.getFullYear(), month, 1)
          mode = 2
          break
        case 5:
          time = 183 * 24 * 60 * 60 * 1000 / rowW
          firstDay = new Date(startTime.getFullYear(), 0, 1)
          mode = 2
          break
      }
      return { time, firstDay, mode }
    },
    /* 对数据进行处理
    /* firstDay 日，周，季，月，半年模式切换下的开始时间，如月，季度，半年模式下，是该月的1号，周模式下是该周的第一天
    /* startTime 该条主数据的开始时间
    /* time 时间基数
    */
    formatGanteData (gattData, time, diff, startTime) {
      let number = 0 // 序号
      for (const i of gattData) {
        if (i.startTime || i.endTime) {
          i.left = (i.startTime - startTime + diff) / time
          if (i.endTime && i.endTime >= i.startTime && i.startTime) {
            i.width = (new Date(new Date(i.endTime).getFullYear(), new Date(i.endTime).getMonth(), new Date(i.endTime).getDate() + 1) - i.startTime) / time
          } else {
            i.width = 0
          }
        }
        if (i.params && i.params.showChild && i.params.children && i.params.children.length) {
          // 浮窗有子集场景
          i.params.children.forEach(pChild => {
            if (pChild.startTime || pChild.endTime) {
              // 注意这样算，pChild的开始结束时间字符串格式和i的开始结束时间时间戳格式需要统一保持一致，否则可能有误差
              const startTimeP = new Date(pChild.startTime).getTime()
              const endTimeP = new Date(pChild.endTime).getTime()
              const startTime = new Date(new Date(startTimeP).getFullYear(), new Date(startTimeP).getMonth(), new Date(startTimeP).getDate())
              const endTime = new Date(new Date(endTimeP).getFullYear(), new Date(endTimeP).getMonth(), new Date(endTimeP).getDate() + 1)
              pChild.left = (startTime - i.startTime) / time
              pChild.bgcColor = pChild.bgcColor ? pChild.bgcColor : 'rgba(' + this.getColorByRandom() + ',1)'
              pChild.perBgColor = pChild.perBgColor ? pChild.perBgColor : 'rgba(' + this.getColorByRandom() + ',1)'
              if (pChild.endTime && endTime >= startTime && pChild.startTime) {
                pChild.width = (endTime - startTime) / time
              } else {
                pChild.width = 0
              }
            }
          })
        }
        if (i.open === undefined) {
          this.$set(i, 'open', this.open)
        }
        if (i.children) {
          number++
          i.params.number = number
          this.formatGanteData(i.children, time, diff, startTime)
        } else {
          number++
          i.params.number = number
        }
      }
    },
    accuracyFn (value) {
      const precision = 14
      return Number(math.format(value, precision))
    },
    setRowColor (id) {
      // const loop = (d) => {
      //   d.forEach(item => {
      //     if (item.id === id) {
      //       this.$set(item, focus, true)
      //       if (item.children && item.children.length) {
      //         loop(item.children)
      //       }
      //     }
      //   })
      // }
      // loop(this.gattData)
    },
    // 自定义十种随机色
    getColorByRandom () {
      // const colorList = ['173,25,177', '2,129,31', '89,97,233', '46,176,219', '204,126,70', '78,150,246', '230,136,138', '79,135,156', '115,190,146', '192,196,204']
      // const colorIndex = Math.floor(Math.random() * colorList.length)
      // const color = colorList[colorIndex]
      // colorList.splice(colorIndex, 1)
      // return color
      var r = Math.floor(Math.random() * 256)
      var g = Math.floor(Math.random() * 256)
      var b = Math.floor(Math.random() * 256)
      return r + ',' + g + ',' + b
    }
  }
}
</script>

<style lang="stylus" scoped>
.gatt-wrap
  width 100%
  height 100%
  // border 1px solid #ccc
  overflow hidden
  box-sizing border-box
  position relative
  .gatt-left
    height 100%
  .gatt-right
    overflow auto
    height 100%
    box-sizing border-box
  .tool-tip
    position absolute
    right 20px
    top 44px
    z-index 99
    font-weight 400
    text-align center
    user-select none
    .today
      display inline-block
      height 30px
      user-select none
      line-height 30px
      padding 0 15px
      background-color #fff
      font-size 14px
      cursor pointer
      transition all .3s cubic-bezier(.645,.045,.355,1)
      color #303030
      border-radius 3px
      box-shadow 0 3px 12px 0 rgba(48,48,48,.05), 0 3px 6px 0 rgba(48,48,48,.1)
      margin-right 20px
      &:hover
        color #409eff
    .tool-tip-drop
      .el-dropdown-link
        height 30px
        display inline-block
        user-select none
        line-height 30px
        padding 0 15px
        background-color #fff
        font-size 14px
        cursor pointer
        transition all .3s cubic-bezier(.645,.045,.355,1)
        color #303030
        border-radius 3px
        box-shadow 0 3px 12px 0 rgba(48,48,48,.05), 0 3px 6px 0 rgba(48,48,48,.1)
        margin-right 0px
        &:hover
          color #409eff
</style>
